<script
  setup
  lang='ts'
>
import {CategoryItem} from "@/types/home.d.ts";

// 定义 props 接收数据
defineProps<{
  list: CategoryItem[]
}>()
</script>

<template>
  <view class='category'>
    <view class='category'>
      <navigator
        class='category-item'
        hover-class='none'
        url='/pages/index/index'
        v-for='item in list'
        :key='item.id'
      >
        <!--:src="item.icon"-->
        <image
          class='icon'
          mode='aspectFit'
          :src='item.icon'
        ></image>
        <text class='text'>{{ item.name }}</text>
      </navigator>
    </view>
  </view>
</template>

<style lang='scss'>
/* 前台类目 */
.category {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 328rpx;
  
  .category-item {
    width: 150rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    
    .icon {
      width: 100rpx;
      height: 100rpx;
    }
    
    .text {
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>
